<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>考勤月报</title>
</head>
<body>
<script type="text/javascript">
$(function(){
	//初始化表格
	chushi("",null,1)
	$('#title-right-input1').combogrid({
        panelWidth:148,
        url:'selectMonth',
        singleSelect:true,
        idField:'month',
        treeField:'month',
        columns:[[
        	{field:'id',title:'#',width:28},
            {field:'year',title:'年',width:60},
            {field:'month',title:'月',width:60}
        ]],
        onClickRow:function(rowIndex, rowData){
        	$("#date").val(rowData['year']+"-"+rowData['month']+"-01");
    		var date=new Date();
    		var s=0;
    		if(date.getFullYear()==rowData['year']&&date.getMonth()+1==rowData['month']){
    			s=1;
    		}
        	chushi(rowData['year']+"-"+rowData['month']+"-01",$("#staff_id").val(),1);
    	}
	});
	$('#title-right-input2').combogrid({
        panelWidth:250,
        url:'select_sousuoKuang',
        singleSelect:true,
        idField:'Staff_name',
        treeField:'Staff_name',
        columns:[[
        	{field:'sortable',title:'#',width:28},
        	{field:'staff_id',hidden:true},
            {field:'Staff_name',title:'姓名',width:60},
            {field:'depart_name',title:'部门',width:60},
            {field:'Staff_phone',title:'联系电话',width:100}
        ]],
        onClickRow:function(rowIndex, rowData){
        	var time=$("#date").val();
        	console.log(time);
    		$("#staff_id").val(rowData['staff_id']);
    		var str=time.split("-");
    		var date=new Date();
    		var s=0;
    		if(date.getFullYear()==str[0]&&date.getMonth()+1==str[1]){
    			s=1;
    		}
    		chushi(time,rowData['staff_id'],s)
    	}
    });
});
function chushi(text,id,pan){
	console.log(text);
	$('#table1').datagrid({
		url:'month_selectAll',
		singleSelect:true,
		frozenColumns: [[
			 	{field:'sortable',title:'#',width:28,align:'center'},
				{field:'Staff_name',title:'姓名',width:100,align:'center'},
				{field:'depart_name',title:'部门',width:100,align:'center'},
				{field:'position_name',title:'职位',width:100,align:'center'},
		]],
		columns:[[
			{field:'staff_id',hidden:true},
			{field:'AM_MONTH',hidden:true},
			{field:'Dateentry',title:'入职日期',width:120,align:'center'},
			{field:'AM_YINGCHU',title:'本月应出勤天数',width:120,align:'center'},
			{field:'AM_SHICHU',title:'实际出勤天',width:200,align:'center'},
			{field:'AM_CHI',title:'迟到/次',width:120,align:'center',
				formatter: function(value,row,index){
					if (value==null){
						return 0;
					} else {
						return value;
					}
				}},
			
			{field:'AM_TUI',title:'早退/次',width:120,align:'center',
					formatter: function(value,row,index){
						if (value==null){
							return 0;
						} else {
							return value;
						}
					}},
			{field:'AM_KUANG',title:'矿工/天',width:120,align:'center',
					formatter: function(value,row,index){
						if (value==null){
							return 0;
						} else {
							return value;
						}
					}},
			{field:'AM_QUE',title:'缺勤/次',width:120,align:'center',
						formatter: function(value,row,index){
							if (value==null){
								return 0;
							} else {
								return value;
							}
						}},
			{field:'AM_CHU',title:'出差/天',width:100,align:'center',
							formatter: function(value,row,index){
								if (value==null){
									return 0;
								} else {
									return value;
								}
							}},
			{field:'AM_QING',title:'请假/天',width:210,align:'center',
									formatter: function(value,row,index){
										if (value==null){
											return 0;
										} else {
											return value;
										}
									}},
			{field:'AM_GONGJIA',title:'平时加班/h',width:120,align:'center',
										formatter: function(value,row,index){
											if (value==null){
												return 0;
											} else {
												return value;
											}
										}},
			{field:'AM_XIUJIA',title:'休息日加班/h',width:120,align:'center',
											formatter: function(value,row,index){
												if (value==null){
													return 0;
												} else {
													return value;
												}
											}},
			{field:'AM_JIEJIA',title:'节假日加班/h',width:120,align:'center',
												formatter: function(value,row,index){
													if (value==null){
														return 0;
													} else {
														return value;
													}
												}},
			{field:'caozuo',title:'操作',width:150,align:'center',
				formatter: function(value,row,index){
					var str="暂无";
					if(pan==1){
						str="<button class='btn3' id='btn-xiang' ss='"+row['staff_id']+"' value='"+row['AM_MONTH']+"'  onclick='xiang(this)' >详情</button>"
					}
						return  str;
				}
			}
   	 	]],
	   	queryParams: {
	 		date: text,
	 		staff_id: id
	 	},
	    pagination:true,
	    pageNumber:1,
	    pageSize:5,
	    pageList:[5,10,15]
	});
}

function xiang(x){
	var id=$(x).attr("ss");
	var date=$(x).attr("value")
	$("#content-admin").panel({
		href:"kq-attendance-month-xiang?id="+id+"&&date="+date
	});
}
</script>
<style type="text/css">
	.index-body1{
		padding: 20px;
    	background-color: #f3f3f3;
    	padding-bottom: 30px;
	}
	.title-right-input1{
		line-height: 22px;
    	height: 22px;
	}
	.body-table{
		margin-top: 10px
	}
	.index-body2{
		width: 100%;
	    height: 100%;
	    background-color: #fff;
	}
	.index-body3{
		min-width: 950px;
	     padding: 20px;
	    position: relative;
	}
	.title-left{
		display: inline-block;
	    float: left;
	    margin-right: 5px;
	    font-size: 12px;
	   	color: gray;
	}
	.title-left span{
		color: #19AA8D;
	    font-size: 16px;
	    font-weight: 700;
	}
	.title-right{
		float: right;
	}
	.title-right div{
		float: left;
		margin-bottom: 5px;
    	margin-right: 100px;
	}
	.title-right i{
		background-color: red;
	    width: 22px;
	    height: 22px;
	    display: table;
	    float: right;
	}
	.title-right div input{
		background-color: inherit;
		height: 22px;
	    padding: 0 4px;
	    font-size: 12px;
	    border-radius: 2px;
	    border: 1px solid #eee;
	}
	#table1{
		width: 100%;
	    float: left;
	    overflow-x: auto;
	    margin-top: 5px;
	    border-collapse: collapse;
	    border: 1px solid #e4e7ec;
	    background-color: #fff;
	    
   		color: gray;
   		font-size:12px; 
	}
	#table1 thead{
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	} 
	#table1 th{
		background: #6666661a;
	}
	#table1 td{
		border: 1px solid #e4e7ec;
		width: 150px;
		height: 50px;
	}
	.table1-xiang{
		padding: 2px 8px 1px 8px;
    	font-size: 12px;
    	border-radius: 3px;
    	color: #666;
    	background-color: #fff;
    	border-color: #e5e6e7;
	}
	.datagrid-header-row td{
		background: #6666661a;
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	}
	.datagrid-row td{
		background: #fff;
		font-size: 12px;
	}
	.datagrid-row td:hover{
		background: #f3f3f3;
	}
</style>
	<div class="index-body1">
		<div class="index-body2">
			<div class="index-body3">
				<div class="title">
					<div class="title-left"> 
						<span>考勤月份</span>
						<input id="title-right-input1" class="easyui-combogrid" editable="false" value="${month }"></input>
						<input id="date" type="hidden" value="${year }"/>
					</div>
					<div class="title-right"> 
						<div><input id="title-right-input2" placeholder="请输入员工姓名"></input>
						<input id="staff_id" type="hidden"/>
						</div>
					</div>
				</div>
				<div class="body-table">
					<table id="table1" class="easyui-datagrid" data-options="width:1023,height:300" >
					    
					</table>
				</div>
			</div>
		</div>
	</div>
</body>
</html>